<template>
  <div class="inner">
    <div class="ibody">
      <div class="pheader">
        <div class="logo">
          <el-image :src="logoPng" fit="contain" />
        </div>
        <div class="qr">
          <el-image :src="barcodePng" fit="contain" />
        </div>
      </div>
      <div class="pdetail mt20">
        <el-row>
          <el-col :span="6">
            <span>患者：</span>
            <span>{{ packageData }}</span>
          </el-col>
          <el-col :span="6">
            <span>性别：</span>
            <span>男</span>
          </el-col>
          <el-col :span="6">
            <span>年龄：</span>
            <span>67</span>
          </el-col>
          <el-col :span="6">
            <span>10219200922008001</span>
          </el-col>
        </el-row>
        <div class="table-wrap mt20">
          <el-table
            :data="packageData.drugs"
            style="width: 100%"
            border
            row-class-name="table-normal-row"
            header-row-class-name="table-header-row"
          >
            <el-table-column label="名称">
              <template #default="scope">
                {{ scope.row.productName }}（{{ scope.row.commonName }}）
              </template>
            </el-table-column>
            <el-table-column prop="standard" label="规格" width="180" />
            <el-table-column prop="amount" label="数量" />
            <el-table-column prop="price" label="价格" />
          </el-table>
        </div>
        <el-row class="mt20">
          <el-col :span="6">
            <span>收货人：</span>
            <span>张三</span>
          </el-col>
          <el-col :span="6">
            <span>手机号：</span>
            <span>13288214456</span>
          </el-col>
          <el-col :span="12">
            <span>收货地址：</span>
            <span>北京市朝阳区望京SOHO T3 3801</span>
          </el-col>
        </el-row>
        <el-row class="mt20">
          <el-col :span="6">
            <span>分拣框号：</span>
            <span>1</span>
          </el-col>
          <el-col :span="6">
            <span>拣货单号：</span>
            <span>1003288214456</span>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import barcodePng from "@/assets/img/barcode.png";
import logoPng from "@/assets/img/logo.png";
import { ref, onMounted, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessageBox, ElMessage } from "element-plus";
import { getPackageDetailApi } from "@/api/package";
const router = useRouter();
const route = useRoute();
const orderfillNo = (route.query.orderfillNo || "123456") as string;
console.log("orderfillNo:", orderfillNo);
if (!orderfillNo) {
  router.back();
}
const packageData = ref({
  orderfillId: "",
  orderfillNo: "",
  recipientName: "",
  category: "", //种类
  qantity: "", //数量
  status: "",
  pickingTime: "", //拣货时间
  picker: "",
  sortingTime: "", //分拣时间
  sorter: "",
  reviewingTime: "", //复核时间
  reviewer: "",
  outWarehouseTime: "", //出库时间
  outWarehousePerson: "",
  shippingAddress: "",
  drugs: []
});

async function getPackage() {
  packageData.value = await getPackageDetailApi(orderfillNo);
}
onMounted(() => {
  getPackage;
});
</script>
<style lang="scss" scoped>
.ibody {
  .pheader {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    .logo {
      width: 120px;
    }
    .qr {
      width: 120px;
    }
  }
  .pdetail {
    .table-wrap {
    }
  }
}
</style>
